<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>修改角色</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/admin.css"/>
    <link rel="stylesheet" type="text/css" href="../css/lift.css">
    <style>
    .layui-form{
      width: 275px;
      height:185px;
      margin:0 auto;
        }
    .add-name th{
        width:100px;
        height:40px;
        font-size:14px;
        padding: 0;
        vertical-align: middle;
        }
    .add-name input{
        outline:none;
        width:160px;
        height: 28px;
        border:1px solid #E5BA70;
        border-radius:5px;
      }
    .tianjia-checkBox th{
      width:100px;
      height:40px;
      font-size:14px;
      padding-top:10px;
      vertical-align: top;
      }
      tr.tianjia-checkBox td input{
      display: inline-block;
      }
    .layui-form .layui-table{
      margin-top:50px;
      margin:0 auto;
    }
    .layui-form #role_name{
      width:145px;
      height:25px;
       border-radius:5px;
       border:1px solid #888;
       display:inline-block;
    }
     .layui-input-block  span{
      font-size: 14px;
    }
    .layui-input-block th{
       font-size: 14px;
    }
    #btn-c,#btn-s{
      border:0;
      margin-top: 3px;
      width: 90px;
      height: 28px;
      border-radius:5px;
      background-color: #D8D8D8;
    }
    #btn-c{
       margin-left:70px;
    }
    #btn-s:hover,#btn-c:hover{
      color:#fff;
     background-color:#EF7632;
    }
    #btn-s{
      margin-left:15px;
    }
    .layui-layer .layui-layer-title{
      background-color: #fff;
    }
    .layui-form-checkbox{
      padding:0;
    }
      /*  复选框样式 */
  .layui-form-checkbox span, .layui-form-checked:hover span{
      color:#333;
      margin-left:30px;
      margin-bottom:10px;
      font-size:16px;
      background-color:#fff;
    }
    .layui-form .layui-table-add{
      margin-left:40px;
    }
    .layui-form-checked[lay-skin=primary] i{
      border:1px solid #FABB42;
      background-color:#FABB42;
    }
    </style>
</head>
<body>
     <form class="layui-form" action="">
     <h3 style="display:inline-block">角色名称&emsp;</h3>
     <input type="text" id="role_name" value="" onfocus="this.style.color='#777';
      this.value='';"  onblur="this.style.color='#777';  this.value=this.value"   />
      <h3>所属权限:&emsp;</h3>
            <table class="layui-table layui-table-add" lay-skin="nob">
              <tbody id="qx">
              <th class="check"></th>
              </tbody>
              <tbody id="new">
              <th class="check"></th>
              </tbody>
            </table>
          <input type="button" id="btn-c" value="取消">
          <input type="button" id="btn-s" value="保存">
        </form>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script>
         layui.use(['jquery','form','upload','layer'], function(){

           var layer = layui.layer;
           var $ = layui.jquery;
           var form = layui.form();
           var params={};
//获取权限列表
      searchPrower();
      function searchPrower(){
         var powerData;
          $.ajax({
           url: '../../role_manage/getWuyePower',
           type: 'get',
           dataType: 'json',
           data:{},
          })
              .done(function(response){
                 console.log("success",response);
  //prowerData 所有权限

          if(response.resultCode == 200){

              var tab = '';
             console.log(response.powers.length);

          if(response.powers.length){
                powerData= response.powers;
                console.log(powerData);
//根据角色id查询角色
        var role_id = localStorage.getItem("roleID");
            console.log(role_id);
        var roleData;

        $.ajax({
           url: '../../role_manage/getWuyeRoleByRoleId',
           type: 'get',
           dataType: 'json',
           data:{
               role_id:role_id
           }
           })
           .done(function(response){
              console.log('success',response);

          if(response.resultCode == 200){
              console.log(response.role.powers);

            if(response.role.powers.length){

              roleData = response.role.powers;
              console.log(roleData);

            for(var i=0; i< powerData.length; i++){
              tab +=
                   '<tr data-id="'+powerData[i].power_id+'">'+
                   '<td class="check"><input data-id="'+powerData[i].power_id+'"  type="checkbox"  name="items"  title="'
                   +powerData[i].power_description+'" lay-skin="line"></td>'+
                   '</tr>'
          }
         $("#qx").html(tab);
           form.render();
        }
       }
  //当前角色的权限prowers
           })
           .fail(function(response){
              console.log('fail',response);
           })

          }
         }
        })
      .fail(function(response){
                console.log("fail",response);
              if(response.resultCode=='001'){
                console.log("getWuyePower success");
                }
            })
        }
//保存
    $("#btn-s").off("click","#btn-s").on("click",function(){

        var role_name = $("#role_name").val();
            console.log(role_name);

        var role_id = localStorage.getItem("roleID");
            console.log(role_id);

          var  power_Id = [];
          $("input[name='items']:checked").each(function() {
              power_Id.push($(this).data("id"));
          });
            console.log(power_Id.length==0 ? '你还没有选择任何内容':power_Id);

       if(role_name){
         $.ajax({
             url: '../../role_manage/updateRole',
             traditional: true,
             type: 'POST',
             dataType: "json",
             data:{
               role_name:role_name,
               power_id:power_Id,
               role_id:role_id,
              },
             })
             .done(function(response){
                console.log("success",response);
                 window.parent.location.reload();
                 var index=parent.layer.getFrameIndex(window.name);
                 parent.layer.close(index);
             if(response.resultCode == '200'){
                console.log("fixrole success");
                alert("修改成功！")
            }
          })
           .fail(function(response){
               console.log("fail",response);
               alert("修改失败！")
               window.parent.location.reload();
               var index=parent.layer.getFrameIndex(window.name);
               parent.layer.close(index);
              if(response.resultCode=='001'){
               console.log("param is not found");

                }
            })
      }

    })
   $("#btn-c").click(function(){
      window.parent.location.reload();
      var index=parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
     })
          });

    </script>
</body>
</html>
